


Component({
    pageLifetimes: {

        //页面展示
        show() {
          this.getServerData("接单额");
        },
        //页面隐藏
        hide() {

        }
    },
  
  
    data: {

    
      buttons: [
        { id: 1, name: '当日',checked:true }, 
        { id: 2, name: '当月',checked:false }, 
        { id: 3, name: '当年',checked:false }
      ],

      button2: [
        { id: 1, name: '接单额',checked:true }, 
        { id: 2, name: '接单平方',checked:false }, 
        { id: 3, name: '接单达标率',checked:false }, 
        { id: 4, name: '出货额',checked:false }, 
        { id: 5, name: '出货平方',checked:false }, 
        { id: 6, name: '出货达标率',checked:false }, 
        { id: 7, name: '投诉率',checked:false },
        { id: 8, name: '退货率',checked:false },
      ],

      tableHeader: [
        {
          prop: 'sale_name',
          width: 180,
          label: '销售单位',
          color: 'blue'
        },
        {
          prop: 'accept_money',
          width: 140,
          label: '接单额'
        },
        {
          prop: 'accept_m',
          width: 145,
          label: '接单平方'
        },
        {
          prop: 'target_money',
          width: 140,
          label: '目标额'
        },
        {
          prop: 'OK_rate',
          width: 140,
          label: '达标率'
        }
      ],
      stripe: true,
      border: true,
      outBorder: true,
      row: [
        {
          "id": 1,
          "sale_name": "业务一部",
          "accept_money": 100,
          "accept_m": 50,
          "target_money": 800,
          "OK_rate": 0.5,
            
        }, 
        
      ],
      
      // ec: {
      //   onInit: initChart
      // }
      chartData: {},
    //这里的 opts 是图表类型 type="line" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['line'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        canvas2d:true,
        timing: "easeOut",
        duration: 1000,
        rotate: false,
        rotateLock: false,
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,10,0,15],
        fontSize: 13,
        fontColor: "#666666",
        dataLabel: true,
        dataPointShape: true,
        dataPointShapeType: "solid",
        touchMoveLimit: 60,
        enableScroll: false,
        enableMarkLine: false,
        legend: {
          show: true,
          position: "bottom",
          float: "center",
          padding: 5,
          margin: 5,
          backgroundColor: "rgba(0,0,0,0)",
          borderColor: "rgba(0,0,0,0)",
          borderWidth: 0,
          fontSize: 13,
          fontColor: "#666666",
          lineHeight: 11,
          hiddenColor: "#CECECE",
          itemGap: 10
        },
        xAxis: {
          disableGrid: true,
          disabled: false,
          axisLine: true,
          axisLineColor: "#CCCCCC",
          calibration: false,
          fontColor: "#666666",
          fontSize: 13,
          lineHeight: 20,
          marginTop: 0,
          rotateLabel: false,
          rotateAngle: 45,
          itemCount: 5,
          boundaryGap: "center",
          splitNumber: 5,
          gridColor: "#CCCCCC",
          gridType: "solid",
          dashLength: 4,
          gridEval: 1,
          scrollShow: false,
          scrollAlign: "left",
          scrollColor: "#A6A6A6",
          scrollBackgroundColor: "#EFEBEF",
          title: "",
          titleFontSize: 13,
          titleOffsetY: 0,
          titleOffsetX: 0,
          titleFontColor: "#666666",
          format: "",
          
        },
        yAxis: {
          gridType: "solid",
          dashLength: 2,
          disabled: false,
          disableGrid: false,
          splitNumber: 5,
          gridColor: "#CCCCCC",
          padding: 10,
          showTitle: true,
          data: [
            
            {
              title: "和美",
              min: 0,
              max: 300,
            }
          ]
        },
       
        extra: {
          line: {
            type: "straight",
            width: 2,
            activeType: "hollow",
            linearType: "none",
            onShadow: false,
            animation: "vertical"
          },
          tooltip: {
            showBox: true,
            showArrow: true,
            showCategory: false,
            borderWidth: 0,
            borderRadius: 0,
            borderColor: "#000000",
            borderOpacity: 0.7,
            bgColor: "#000000",
            bgOpacity: 0.7,
            gridType: "solid",
            dashLength: 4,
            gridColor: "#CCCCCC",
            boxPadding: 3,
            fontSize: 13,
            lineHeight: 20,
            fontColor: "#FFFFFF",
            legendShow: true,
            legendShape: "auto",
            splitLine: true,
            horizentalLine: false,
            xAxisLabel: false,
            yAxisLabel: false,
            labelBgColor: "#FFFFFF",
            labelBgOpacity: 0.7,
            labelFontColor: "#666666"
          },
          markLine: {
            type: "solid",
            dashLength: 4,
            data: []
          }
        }
      }
    },
    
  
    methods: {
  
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function () {
        this.data.buttons[5].checked=true;
        this.setData({
          buttons: this.data.buttons,
        })
      },
      radioButtonTap: function (e) {
        console.log(e)
        let id = e.currentTarget.dataset.id
        console.log(id)
        for (let i = 0; i < this.data.row.length; i++) {
          this.data.row[i].status=id
        }
        for (let i = 0; i < this.data.buttons.length; i++) {
          if (this.data.buttons[i].id == id) {
            //当前点击的位置为true即选中
            this.data.buttons[i].checked = true;
          }
          else {
            //其他的位置为false
            this.data.buttons[i].checked = false;
          }
        }
        this.setData({
          buttons: this.data.buttons,
          
        })
        this.setData({
          row:this.data.row,
        })
        
      },
  
      
      radioButtonTap2: function (e) {
        let id = e.currentTarget.dataset.id
        for (let i = 0; i < this.data.button2.length; i++) {
          if (this.data.button2[i].id == id) {
            //当前点击的位置为true即选中
            this.data.button2[i].checked = true;
            this.getServerData(this.data.button2[i].name)
          }
          else {
            //其他的位置为false
            this.data.button2[i].checked = false;
          }
        }
        this.setData({
          button2: this.data.button2,
          
        })
        
      },

      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady:function() {
        
      },
        
      getServerData(name) {        
        let cate = ["01","02","03","04","05","06","07","08","09","10","11","12"]
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: cate,
            series: [
              // {
              //   name: "成交量A",
              //   data: [35,8,25,37,4,20]
              // },
              // {
              //   name: "成交量B",
              //   data: [70,40,65,100,44,68]
              // },
              {
                name: name,
                data: [100,80,95,200,112,132]
              }
            ]
          };
        this.setData({ chartData: JSON.parse(JSON.stringify(res)) });
       
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow:function() {
  
      },
  
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide:function() {
        
      },
   
    },
  
      
  })

  
  
  